<template>
	<div>
		<el-card class="!border-none mt-4" shadow="never">
			<el-tabs v-model="paramster.is_read" @tab-change="getLists">
				<el-tab-pane v-for="(item, index) in tabsMap" :key="index" :label="item.name" :name="item.type"
					lazy></el-tab-pane>
			</el-tabs>
			<el-table class="mt-[20px]" size="large" :data="messageList"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="标题内容" prop="title" align="center">
					<template #default="{ row }">
						<el-button type="primary" link>
							<router-link :to="{
					                path: getRoutePath('basicSettings.basicSettings/detail'),
					                query: {
					                    id: row.id
					                }
					            }">
								<span class="main-color">{{row.title}}</span>
							</router-link>
						</el-button>
					</template>
				</el-table-column>
				<el-table-column label="时间" prop="create_time" align="center" />
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link @click="handleDelete(row.id)">
							<span class="main-color1">删除</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="p-[20px] v-flex v-row-right">
				<el-pagination background layout="prev, pager, next" :default-page-size="paramster.page_size"
					:current-page="paramster.page_no" :total="total" @current-change="handleCurrentChange"/>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup>
	import { usePaging } from '@/hooks/usePaging'
	import { getRoutePath } from '@/router'
	import feedback from '@/utils/feedback'
	import { GetMessage } from '@/api/basicSettings'
	const paramster = reactive({//列表传参
		page_no: 1,//页码
		page_size: 10,//数量
		is_read: '',//0-未读，1-已读，不传-全部
		title: '',//标题搜索
	})
	const total = ref('')//总页码
	const messageList = ref([])//消息列表
	enum NoticeEnums {
		USER = '',
		PLATFORM = 0,
		HasRead = 1
	}
	const tabsMap = [
		{
			name: '全部',
			type: NoticeEnums.USER
		},
		{
			name: '未读',
			type: NoticeEnums.PLATFORM
		},
		{
			name: '已读',
			type: NoticeEnums.HasRead
		}
	]
	const handleDelete = async (id : number) => {
		await feedback.confirm('确定要删除？')
		// await menuDelete({ id })
		getLists()
	}
	const getLists = async () => {
		await GetMessage(paramster).then(res => {
			messageList.value = res.lists
			total.value = res.total
		})
	}
	getLists()
	// 分页
	const handleCurrentChange = (val : number) => {
		paramster.page_no = val
		getLists()
	}
</script>
<style scoped>
	.el-tabs__item.is-active {
		color: var(--el-text-color-main);
		font-weight: bold;
	}

	.el-tabs__nav-wrap::after {
		background-color: #F5F5F5;
	}

	.el-tabs__active-bar {
		background-color: var(--el-text-color-main);
	}

	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>